<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        show-overflow-tooltip
        prop="id"
        label="产品ID"
        width="80"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="产品名称"
        width="150"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="image"
        label="图片地址"
        width="100"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="sellPoint"
        label="产品卖点"
        width="200"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="price"
        label="产品价格"
        width="80"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="cid"
        label="产品类目"
        width="80"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="num"
        label="产品库存"
        width="80"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="descs" label="产品描述">
        <template slot-scope="scope">
          <div v-html="scope.row.descs"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "../../api";
export default {
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.http(1);
    this.$bus.$on("onPage", (val) => {
      this.http(val);
    });
    this.$bus.$on("onRefresh", (val) => {
      this.http(1);
    });
    this.$bus.$on("onSearch", (search) => {
      api.search({ search }).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.tableData = res.data.result;
          } else {
            this.$message.error("无法查询此内容");
          }
        } else {
          console.log(res.data.msg);
        }
      });
    });
  },
  methods: {
    http(page) {
      api.selectTabItemAllByPage({ page }).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.tableData = res.data.result;
          }
        }
      });
    },
    /**
     * 编辑按钮
     */
    handleEdit(index, row) {
      this.$bus.$emit('onEditorDialog', row)
    },
    handleDelete(index ,row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                    api.deleteItemById({
                        id: row.id,
                    })
                        .then((res) => {
                            if (res.data.code === 200) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                this.http(1);
                            } else {
                                this.$message({
                                    type: "warning",
                                    message: "删除失败",
                                });
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
    }
  },
};
</script>

<style>
</style>